import { useEffect, useState } from "react";
import cls from "classnames";

import "./siderNav.scss";
import { useLocation, useNavigate, useSearchParams } from "react-router-dom";

const siderBarItems = [
  {
    label: "前端",
    code: "qiand",
  },
  {
    label: "后端",
    code: "houd",
  },
];
export default function WebSiderNav() {
  const [currentSider, setCurrentSider] = useState<string>(siderBarItems[0].code);
  const location = useLocation();
  const navigate = useNavigate();
  const [searchParans] = useSearchParams();

  const SiderBars = siderBarItems.map((item) => {
    return (
      <section
        className={cls({ "sider-nav-item": true, active: currentSider === item.code })}
        onClick={() => navigate(`${location.pathname}?code=${item.code}`)}
        key={item.code}
      >
        {item.label}
      </section>
    );
  });
  useEffect(() => {
    if (searchParans.get("code")) {
      const code = searchParans.get("code") as string;
      setCurrentSider(code);
    }
  }, [searchParans]);

  return <section className='sider-nav'>{SiderBars}</section>;
}
